<div class="buffer">
  <div class="arrow"></div>
  <div class="content">
    <form nz-form [formGroup]="formGroup">
      <div nz-form-control [nzValidateStatus]="formGroup.controls['buffer']">
        <nz-input-group [nzSize]="'large'" nzCompact>
          <nz-select formControlName="unit" [nzSize]="'large'" style="width: 30%;">
            <nz-option [nzLabel]="'公里'" [nzValue]="'kilometers'"></nz-option>
            <nz-option [nzLabel]="'米'" [nzValue]="'meters'"></nz-option>
            <nz-option [nzLabel]="'英里'" [nzValue]="'miles'"></nz-option>
            <nz-option [nzLabel]="'英尺'" [nzValue]="'feet'"></nz-option>
            <nz-option [nzLabel]="'度'" [nzValue]="'degrees'"></nz-option>
          </nz-select>
          <nz-input-number formControlName="value" [nzSize]="'large'" [nzMin]="0" [nzMax]="1000" [nzStep]="1" id="'buffer'" style="width: 70%; margin-right: 0"></nz-input-number>
        </nz-input-group>
      </div>
      <div nz-row style="margin-top: 12px">
        <div nz-col nzSpan="12">
          <label nz-checkbox formControlName="clone">
            <span>复制</span>
          </label>
          <nz-tooltip nzTitle="将设置缓冲区后的图形插入到地图中，并且保留源图形！" nzPlacement="bottom">
            <i nz-tooltip class="anticon anticon-question-circle-o"></i>
          </nz-tooltip>
        </div>
        <div nz-col nzSpan="12" class="button-container">
          <button nz-button [nzType]="'primary'" (click)="onClickConfirm()">
            <span>确定</span>
          </button>
          <button nz-button [nzType]="'default'" (click)="onClickCancel()">
            <span>取消</span>
          </button>
        </div>
      </div>
    </form>
  </div>
</div>